<template>
  <div class="home">
    <input v-model="value"/>
    <button @click="handleClick">增加</button>
    <ul>
      <ListItem v-for="(item,index) of list" :key="index" :item="item" :inx="index" @delete="handleClear"  ></ListItem>
    </ul>
  </div>
</template>

<script>
import ListItem from "../components/ListItem";
export default { 
  name: "home",
  components:{
    ListItem
  },
  data() {
    return {
      value:"hello world",
      list:[]
    };
  },
  methods: {
    handleClick(){
      if(!this.list.includes(this.value)){
        this.list.push(this.value);
        this.value="";
      }
    },
    handleClear(index){
      this.list.splice(index,1)
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
 
}
</style>
